<template>
  <div>
    <div style="display: flex;">
      <div class="g-card g-pad20" style="flex: 0.4;">
        <div class="title">
          门店导购码
        </div>
        <div class="header_content">
          <div class="unit">
            <div class="title">
              点击/扫码总次数
              <el-popover placement="top" trigger="hover">
                <div slot="reference" style="margin-left: 8px; cursor: pointer;">
                  <img src="../../../assets/marketstrategy/help.svg" alt="" />
                </div>
                <div>进入门店导购码页面的总人数（去重）</div>
              </el-popover>
            </div>
            <div class="value">
              {{ data.totalShopGuideScannNumber || '-' }}
            </div>
            <div class="sub_content">
              <span>今日</span>
              <span style="font-size: 14px;">{{ data.tdShopGuideScannNumber || '-' }}</span>
            </div>
          </div>
          <div class="unit">
            <div class="title">
              新增客户总人数
              <el-popover placement="top" trigger="hover">
                <div slot="reference" style="margin-left: 8px; cursor: pointer;">
                  <img src="../../../assets/marketstrategy/help.svg" alt="" />
                </div>
                <div>成功添加门店导购的客户数（去重）</div>
              </el-popover>
            </div>
            <div class="value">
              {{ data.customerTotalNumber || '-' }}
            </div>
            <div class="sub_content">
              <span>今日</span>
              <span style="font-size: 14px;">{{ data.ydCustomerNumber || '-' }}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="g-card g-pad20" style="flex: 0.6; margin-top: 0; margin-left: 20px;">
        <div class="title">
          门店群活码
        </div>
        <div class="header_content">
          <div class="unit">
            <div class="title">
              点击/扫码总次数
              <el-popover placement="top" trigger="hover">
                <div slot="reference" style="margin-left: 8px; cursor: pointer;">
                  <img src="../../../assets/marketstrategy/help.svg" alt="" />
                </div>
                <div>进入门店导购码页面的总人数（去重）</div>
              </el-popover>
            </div>
            <div class="value">
              {{ data.totalStoreGroupScannNumber || '-' }}
            </div>
            <div class="sub_content">
              <span>今日</span>
              <span style="font-size: 14px;">{{ data.tdStoreGroupScannNumber || '-' }}</span>
            </div>
          </div>
          <div class="unit">
            <div class="title">
              进群总客户数
              <el-popover placement="top" trigger="hover">
                <div slot="reference" style="margin-left: 8px; cursor: pointer;">
                  <img src="../../../assets/marketstrategy/help.svg" alt="" />
                </div>
                <div>成功添加门店客户群的客户数（去重）</div>
              </el-popover>
            </div>
            <div class="value">
              {{ data.totalJoinGroupMemberNumber || '-' }}
            </div>
            <div class="sub_content">
              <span>今日</span>
              <span style="font-size: 14px;">{{ data.tdJoinGroupMemberNumber || '-' }}</span>
            </div>
          </div>
          <div class="unit">
            <div class="title">
              退群总客户数
              <el-popover placement="top" trigger="hover">
                <div slot="reference" style="margin-left: 8px; cursor: pointer;">
                  <img src="../../../assets/marketstrategy/help.svg" alt="" />
                </div>
                <div>退出门店客户群的客户数（去重）</div>
              </el-popover>
            </div>
            <div class="value">
              {{ data.totalExitGroupMemberNumber || '-' }}
            </div>
            <div class="sub_content">
              <span>今日</span>
              <span style="font-size: 14px;">{{ data.tdExitGroupMemberNumber || '-' }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="g-card g-pad20" style="margin-top: 20px;">
      <div class="title">
        数据概览
      </div>
      <div class="data-content">
        <el-tabs v-model="activeName">
          <el-tab-pane label="门店导购码" name="first"> </el-tab-pane>
          <el-tab-pane label="门店群活码" name="second"> </el-tab-pane>
        </el-tabs>
        <div class="chart-content">
          <search-title key="11" v-if="activeName === 'first'" @search="getLineDataFirst"></search-title>
          <search-title key="22" v-if="activeName === 'second'" @search="getLineDataSecond"></search-title>
          <chart-line
            key="444"
            style="height: 300px;"
            v-if="activeName === 'first'"
            :legend="legend"
            :xData="xdata"
            :series="series"
          ></chart-line>
          <chart-line
            key="333"
            style="height: 300px;"
            v-if="activeName === 'second'"
            :legend="legend1"
            :xData="xdata1"
            :series="series1"
          ></chart-line>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import SearchTitle from '../components/SearchTitle'
  import ChartLine from '@/components/ChartLine.vue'

  import { getTabTotalInStore, getLineDataGuideCode, getLineDataStoreCode } from '@/api/drainageCode/store'
  export default {
    name: 'store-analyse',
    data() {
      return {
        activeName: 'first',
        xdata: [],
        series: [],
        legend: ['点击/扫码次数', '新增客户数'],
        xdata1: [],
        series1: [],
        legend1: ['点击/扫码次数', '进群客户数', '退群客户数'],
        query: {
          beginTime: '',
          endTime: '',
          storeCodeId: ''
        },
        data: {
          totalShopGuideScannNumber: 0, // 导购码 扫码总次数
          tdShopGuideScannNumber: 0, // 导购码 今日扫码总次数
          customerTotalNumber: 0, // 导购码 新增客户总数
          ydCustomerNumber: 0, // 导购码 今日新增客户数
          totalStoreGroupScannNumber: 0, // 门店群活码  扫码总次数
          tdStoreGroupScannNumber: 0, // 门店群活码  今日扫码总次数
          totalJoinGroupMemberNumber: 0, // 门店群活码 扫码进群总次数
          tdJoinGroupMemberNumber: 0, // 门店群活码 今日扫码进去总次数
          totalExitGroupMemberNumber: 0, // 门店群活码 离群总次数
          tdExitGroupMemberNumber: 0 // 门店群活码 今日离群总次数
        }
      }
    },
    components: {
      ChartLine,
      SearchTitle
    },
    methods: {
      initData() {
        getTabTotalInStore(this.query.storeCodeId).then((res) => {
          if (res.code === 200) {
            this.data = res.data
          }
        })
      },
      getLineDataSecond(data) {
        this.query.beginTime = data.beginTime
        this.query.endTime = data.endTime
        getLineDataStoreCode(this.query).then((res) => {
          this.xdata1 = []
          this.series1 = []
          let arr1 = []
          let arr2 = []
          let arr3 = []
          if (res.data && res.data.length) {
            res.data.forEach((dd) => {
              this.xdata1.push(dd.dataTime)
              arr1.push(dd.totalStoreGroupScannNumber)
              arr2.push(dd.totalJoinGroupMemberNumber)
              arr3.push(dd.totalExitGroupMemberNumber)
            })
            this.series1 = [arr1, arr2, arr3]
            this.$forceUpdate()
          }
        })
      },
      getLineDataFirst(data) {
        this.query.beginTime = data.beginTime
        this.query.endTime = data.endTime
        getLineDataGuideCode(this.query).then((res) => {
          this.xdata = []
          this.series = []
          let arr1 = []
          let arr2 = []
          if (res.data && res.data.length) {
            res.data.forEach((dd) => {
              this.xdata.push(dd.dataTime)
              arr1.push(dd.totalShopGuideScannNumber)
              arr2.push(dd.customerTotalNumber)
            })
            this.series = [arr1, arr2]
            this.$forceUpdate()
          }
        })
      }
    },
    created() {
      this.query.storeCodeId = this.$route.query.id
      this.initData()
    }
  }
</script>
<style lang="scss" scoped>
  .title {
    font-size: 16px;
    color: #333;
    font-weight: 600;
  }
  .header_content {
    display: flex;
    flex: 1;
    .unit {
      background: #ffffff;
      // box-shadow: 0px 6px 30px 5px rgba(59, 59, 59, 0.05);
      border-radius: 8px;
      margin-right: 16px;
      flex: 1;
      // height: 100px;
      padding: 18px 20px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .title {
        font-size: 14px;
        font-weight: 500;
        color: rgba(0, 0, 0, 0.6);
        display: flex;
        justify-content: space-between;
      }
      .value {
        margin: 10px 0;
        font-size: 28px;
        font-weight: bold;
        color: #0079de;
      }
      .sub_content {
        font-size: 12px;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
    }
  }
  .bar_content {
    margin-top: 16px;
    background: #ffffff;
    border-radius: 8px;
  }
  .data-content {
    margin-top: 10px;
    .chart-content {
      margin-top: 10px;
      .my_button {
        float: right;
      }
      .column {
        display: flex;
        .column-item {
          flex: 1;
        }
      }
    }
    .search-content {
      display: flex;
      justify-content: space-between;
    }
    .table-content {
      margin-top: 10px;
    }
  }
</style>
